<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
    <head> 
    <meta charset="UTF-8">
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
    <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
	 <link rel="stylesheet" href="${ctxStatic}/css/list_erp.css">  
    <script src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>

    <script>
    
    //tabBox
    $(function(){
            $(".tabBox ul li").each(function(){
                var index=$(this).index();

                $(".tabBox ul li").eq(0).addClass("active");

                $(this).click(function(){

                    //alert(index);

                    $(this).addClass("active").siblings().removeClass("active");

                    $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
					
					var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
					var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
					var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
					if(tabodyH>tableScrollH){
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
					}else{
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
					}

                })

            })

        })
    
        $(".tableImg").hover(function(){
            var thisImg = $(this).next('.posImg');
            var thisW = $(this).width();
            var thisH = $(this).height();
            thisImg.css({
                width:thisW*3 + "px",
                height:thisH*3 + "px"
            });
            var thisImgW = thisImg.width();
            var thisImgH = thisImg.height();
            var thisImgTop = $(this).offset().top;
            var thisImgLeft = $(this).offset().left;
            thisImg.css({
                top:thisImgTop - (thisImgH - thisH)/2 + "px",
                left:thisImgLeft - (thisImgW - thisW)/2 + "px",
            })
            
            thisImg.show()
        });

        $(".posImg").hover(function(){
//            移入
        },function(){
            $(this).hide()
        });
        
        /*导出订单*/
        function exportReport(id) {
        	
        	window.location.href = "${ctx}/customization/order/exportOrder?id=${order.id}";
        	
        }
        
    </script>
    </head>
    
	<body>   
		<div id="editPage" class="layerHeader clearfix">
		    <p class="headerTitle"><spring:message code="order_show_order"/></p>
			<div class="headerButton clearfix">
		    	<!-- 导出-->
        		<button type="button" onclick="exportReport(${order.id})"><spring:message code="importExcel_export"/></button>  
        		<!-- 取消 -->
		    	<button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>        
			</div>
		</div>
		
		<div class="tabBox">
		<!-- 隐藏变量 -->
    <input type="hidden" value="${order.orderStatusCD}" id="status">
    <input type="hidden" value="${order.id}" id="status">
    <input type="hidden" value="${order.styleId}" id="status">
    
		    <ul class="clearfix">
		        <!-- 基本信息 -->
		       <li class="active"><spring:message code="order_basic_info"/></li>
		       <!-- 款式 -->
		       <li><spring:message code="order_style"/></li>
		       <!-- 辅料 -->
		       <li><spring:message code="order_accessory"/></li>
		       <!-- 配料 -->
		       <li><spring:message code="order_burdening"/></li>
		       <!-- 刺绣 -->
		       <li><spring:message code="order_embroidery"/></li>
		       <!-- 标牌 -->
		       <li><spring:message code="order_brand"/></li>
		       <!-- 售价 -->
		       <li><spring:message code="order_sales_price"/></li>
		    </ul>
		</div>

		<div class="tabBoxSm showHtml">
			<div class="tabSm smOrderBox">
		    	<div class="smList" style="padding-left: 0px;margin-top:-70px">
		        	<div class="items clearfix">
		        	<p class="contentTit"><spring:message code="order_basic_info"/></p>
		            	<div class="col-50 clearfix">
							<!-- 订单号 -->
					        <p class="tit"><spring:message code="order_orderNo_show"/></p>
					        <p>${order.orderNO}</p>
					     </div>
		                 
		                <div class="col-50 right clearfix">
		                	<!-- 订单状态 -->
		                    <p class="tit"><spring:message code="order_order_state"/></p>
		                    <p>${fns:getDictName(order.orderStatusCD)}</p>
		                </div>
		            </div>
		            <div class="items clearfix">    
		                <div class="col-25 clearfix">
		                	<!-- 款式类型 -->
					        <p class="tit"><spring:message code="order_style_type_show"/></p>
					        <p>${fns:getDictName(order.styleCategoryCD)}</p>
		                </div>
		                <div class="col-25 clearfix">
		                	<!-- 订单数量 -->
		                    <p class="tit"><spring:message code="order_order_number_show"/></p>
		                    <p>${order.orderNumber}</p>
		                </div>      
		                <div class="col-25 right clearfix">
					        <!-- 订单标识 -->
		                    <p class="tit"><spring:message code="order_order_identifying_show"/></p>
		                    <c:set value="<%=ResourcesUtil.getConfig(\"Rework_90\")%>" var="rework" />
		                    <c:set value="<%=ResourcesUtil.getConfig(\"order_flag-normal_10\")%>" var="normal" />
		                    <c:set value="<%=ResourcesUtil.getConfig(\"order_flag-express_20\")%>" var="express" />
		                    <p class="tit">
		                    <c:choose>
		                        <c:when test="${order.orderStatusCD == rework }">
		                            <img src="${ctxStatic}/images/icon-01.png" class="orderListImg">
		                        </c:when>
		                        <c:otherwise>
		                            <c:if test="${order.urgentCD == normal}">
		                                <spring:message code="order_normal"/>
		                            </c:if>
		                            <c:if test="${order.urgentCD == express}">
		                                <spring:message code="order_urgent"/>
		                            </c:if>
		                        </c:otherwise>
		                    </c:choose>
		                    </p>
		                </div>
		            </div>
		            <div class="items clearfix">
	        			<div class="col-50 clearfix">
		        			<!-- 款式名称 -->
					        <p class="tit"><spring:message code="order_style_name_show"/></p>
					        <p>${order.styleNameCN}</p>
				        </div>
				        <div class="col-50 right clearfix">
				        	<!-- 店铺名称 -->
		                    <p class="tit"><spring:message code="order_shop_name_show"/></p>
		                    <p>${order.shopName}</p>
		                </div>
	        		</div>
	        		
	        		<div class="items clearfix">
	        			<div class="col-50 clearfix">
		        			<!-- 面料名称 -->
					        <p class="tit"><spring:message code="order_fabric_name_show"/></p>
					        <p>${material.materialName}</p>
				        </div>
				        <div class="col-50 right clearfix">
				        	<!-- 客户名称 -->
		                    <p class="tit"><spring:message code="order_customer_designation_show"/></p>
		                    <p>${order.customerName}</p>
		                </div>
	        		</div>
	        		
	        		<div class="items clearfix">
	        			<div class="col-50 clearfix">
		        		    <div class="items clearfix item-styleName">
		                	<p class="data_id">&nbsp;</p>
			                    <c:if test="${empty material}">
			                        <img src="${ctxStatic}/images/mlpic-none.jpg" class="styleImgSm"  >
			                    </c:if>
			                    <c:if test="${not empty material}">
			                        <img src="${material.filePath}" class="styleImgSm tableImg" >
			                        <img src="${material.filePath}" class="styleImgSm posImg" >
			                        <div class="imgSmTxt">
			                        <p>${material.materialName}</p>
			                        <p>${material.materialCode}</p>
			                        <p>${material.materialCost}</p>
			                    	</div>
			                    </c:if>
		                	</div> 
				    	</div>
				        <div class="col-50 right clearfix">
				        	<!-- 参考订单 -->
		                    <p class="tit"><spring:message code="order_reference_order_show"/></p>
		                    <p>${order.orderNO}</p>
		                </div>
		                <div class="col-50 right clearfix">
				        	<!-- 尺码组 -->
		                    <p class="tit"><spring:message code="order_sizeGroup"/></p>
		                    <p>${fns:getDictName(order.sizeGroupCD)}/${fns:getDictName(order.sizeCD)}</p>
		                </div>
		                <div class="col-50 right clearfix">
				        	<!-- 年份季节 -->
		                    <p class="tit"><spring:message code="style_yearAndSeason"/><spring:message code="common_colon"/></p>
		                    <p>${order.styleYear}${fns:getDictName(order.styleSeason)}</p>
		                </div>
	        		</div>
	        		
	        		<div class="items clearfix">
	        			<div class="col-25 clearfix">
		        			<!-- 制作工艺： -->
		                    <p class="tit"><spring:message code="order_workmanship_show"/></p>
		                    <p>${fns:getDictName(order.styleMakeCD)}</p>
				        </div>
				        <div class="col-25  clearfix">
				        	<!-- 裁缝： -->
		                    <p class="tit"><spring:message code="order_dressmaker_show"/></p>
		                    <p>${order.tailorName}</p>
		                </div>
		                <div class="col-25 right clearfix">
				        	<!-- 版型选择： -->
		                    <p class="tit"><spring:message code="order_model_choose_show"/></p>
		                    <p>${fns:getDictName(order.fitCD)}</p>
		                </div>
	        		</div>
	        		
	        		<div class="items clearfix">
	        			<div class="col-50 clearfix">
		        			<!-- 创建者： -->
		                    <p class="tit"><spring:message code="order_createUser_show"/></p>
		                    <p>${order.createBy.firstName}${order.createBy.lastName}</p>
				        </div>
		                <div class="col-50 right clearfix">
				        	<!-- 创建日期： -->
		                    <p class="tit"><spring:message code="order_createDate_show"/></p>
		                    <p><fmt:formatDate value="${order.createDate}" pattern="yyyy-MM-dd HH:mm" /></p>
		                </div>
	        		</div>
		        </div>
		    </div>
			<!--款式-->
		    <div class="tabSm none">
		        <div class="tableArea">
		            <div class="tableScroll tableScrollSm" style="height: 452px; width: inherit;padding: 0px;">
		                <div class="contentBox cnBx">
		                    <p class="contentTit"><spring:message code="order_style"/></p>
		                    <div class="formBox scrollBox">
		                        <c:forEach items="${optionList}" var="item" varStatus="status">
		                                <!-- 折行开始 -->
		                                <c:if test="${status.index%2 == 0}">
		                                    <div class="data clearfix">
		                                </c:if>
		                                <!-- 左数据 -->
		                                <c:if test="${status.index%2 == 0}">
		                                    <div class="ch_middle fl">
		                                </c:if>
		                                <!-- 右数据 -->
		                                <c:if test="${status.index%2 == 1}">
		                                    <div class="ch_middle fr">
		                                </c:if>
		                                 <div class="ord_top orderSelectBox ">
		                                      <div class="clearfix">
		                                      <p class="data_block rtname data_id">${item.itemNameCN}：</p>
		                                      </div>
		                                      <p>${item.optionNameCN}</p>
		                                  </div>
		                                  <div class="ord_left">
		                             			<c:choose>
		                                        <c:when test="${item.filePath !=null && item.filePath!=''}">
		                                            <img src="${item.filePath}" class="tableImg">
		                                            <img src="${item.filePath}" class="posImg">
		                                        </c:when>
		                                        <c:otherwise>
		                                            <img src="${ctxStatic}/images/pic-none.jpg">
		                                        </c:otherwise>
		                                    	</c:choose>
		                                    </div>
		                                    </div>
		                                <!-- 折行结束 -->
		                                <c:if test="${status.index%2 == 1 || status.index == (fn:length(optionList)-1)}">
		                                    </div>
		                                </c:if>
		                        </c:forEach>
		                        </div>
		                    </div>
		                </div>
		            </div>
		  		</div>
				<!--辅料-->
			    <div class="tabSm none">
			    	<div class="tableArea">
			        	<div class="tableScroll tableScrollSm" style="height: 452px; width: inherit;padding: 0px;">
			                <div class="contentBox cnBx">
			                <p class="contentTit"><spring:message code="order_accessory"/></p>
			                <div class="formBox scrollBox">
			                     <c:forEach items="${optionList2}" var="item" varStatus="status">
			                     <!-- 折行开始 -->
			                     <c:if test="${status.index%2 == 0}">
			                         <div class="data clearfix">
			                     </c:if>
			                         <!-- 右数据 -->
			                         <c:if test="${status.index%2 == 0}">
			                             <div class="ch_middle fl">
			                         </c:if>
			                         <!-- 左数据 -->
			                         <c:if test="${status.index%2 == 1}">
			                             <div class="ch_middle fr">
			                         </c:if>
			                                <div class="orderSelectBox clearfix">
			                                        <p class="data_block rtname data_id">${item.itemNameCN}：</p>
			                                 </div>
			                                 <p>${item.optionNameCN}</p>
			                            </div>
			                 	<c:if test="${status.index%2 == 1 || status.index == (fn:length(optionList2)-1)}">
			                     	</div>
			                 	</c:if>
			                 </c:forEach>
			                		</div>
			        			</div>
			        		</div>
			    		</div>
			    	</div>
					<!--配料-->
				    <div class="tabSm none">
				    	<div class="tableArea">
				        	<div class="tableScroll tableScrollSm" style="height: 452px; width: inherit;padding: 0px;">
				                <div class="contentBox cnBx">
				                <p class="contentTit"><spring:message code="order_burdening"/></p>
				                <div class="formBox scrollBox">
				                    <c:forEach items="${optionList3}" var="item" varStatus="status">
				                            <!-- 折行开始 -->
				                            <c:if test="${status.index%2 == 0}">
				                                <div class="data clearfix">
				                            </c:if>
				                                <!-- 左数据 -->
				                                <c:if test="${status.index%2 == 0}">
				                                    <div class="ch_middle fl">
				                                </c:if>
				                                <!-- 右数据 -->
				                                <c:if test="${status.index%2 == 1}">
				                                    <div class="ch_middle fr">
				                                </c:if>
				                                        <div class="ord_top">
				                                        <div class="orderSelectBox clearfix">
				                                             <p class="data_block rtname data_id">${item.itemNameCN}：</p>
				                                         </div>
				                                         <p>${item.optionNameCN}</p>
				                                        </div>
				                                    <div class="ord_left">
				                                            <c:choose>
				                                                <c:when test="${item.filePath !=null && item.filePath!=''}">
				                                                    <img src="${item.filePath}" class="tableImg">
				                                                    <img src="${item.filePath}" class="posImg">
				                                                </c:when>
				                                                <c:otherwise>
				                                                    <img src="${ctxStatic}/images/pic-none.jpg">
				                                                </c:otherwise>
				                                            </c:choose>
				                                    </div>
				                                </div>
				                            <!-- 折行结束 -->
				                            <c:if test="${status.index%2 == 1 || status.index == (fn:length(optionList3)-1)}">
				                                </div>
				                            </c:if>
				                    </c:forEach>
				                </div>
				            </div>
				            </div>
				        </div>
				    </div>
				   <!--刺绣-->
				   <div class="tabSm none">
				    	<div class="tableArea">
				        	<div class="tableScroll tableScrollSm" style="height: 452px; width: inherit;padding: 0px;">
				               <div class="contentBox cnBx">
				               <p class="contentTit"><spring:message code="order_embroidery"/></p>
				               <div class="formBox scrollBox">
				                      <c:forEach items="${optionList4}" var="item" varStatus="status">
				                    <!-- 折行开始 -->
				                    <c:if test="${status.index%2 == 0}">
				                        <div class="data clearfix">
				                    </c:if>
				                       <!-- 右数据 -->
				                       <c:if test="${status.index%2 == 0}">
				                           <div class="ch_middle fl">
				                       </c:if>
				                       <!-- 左数据 -->
				                       <c:if test="${status.index%2 == 1}">
				                           <div class="ch_middle fr">
				                       </c:if>
				                               <div class="clearfix">
				                                <div class="orderSelectBox ">
				                                    <p class="data_block rtname data_id">${item.itemNameCN}：</p>
				                                </div>
				                               </div>
				                               <p>${item.optionNameCN}</p>
				                          </div>
				               <c:if test="${status.index%2 == 1 || status.index == (fn:length(optionList4)-1)}">
				                   </div>
				               </c:if>
				               </c:forEach>
				           </div>
				           </div>
				           </div>
				       </div>
				   </div>
					<!--标牌-->
				    <div class="tabSm none">
				    	<div class="tableArea">
				        	<div class="tableScroll tableScrollSm" style="height: 452px; width: inherit;padding: 0px;">
				                <div class="contentBox cnBx">
				                <p class="contentTit"><spring:message code="order_brand"/></p>
				                <div class="formBox scrollBox">
				                     <div class="clearfix">
				                        <div class="ch_middle fl">
				                            <!-- 标牌： -->
				                            <p class="data_block data" style=""><spring:message code="order_brand_show"/>
				                            <c:if test="${fn:length(optionList5) > 0}">
				                                <spring:message code="order_require"/>
				                            </c:if>
				                            <c:if test="${fn:length(optionList5) == 0}">
				                                <spring:message code="order_no_require"/>
				                            </c:if>
				                            </p>
				                        </div>
				                    </div>
				                       <c:forEach items="${optionList5}" var="item" varStatus="status">
				                        <!-- 折行开始 -->
				                        <c:if test="${status.index%2 == 0}">
				                            <div class="data clearfix">
				                        </c:if>
				                            <!-- 右数据 -->
				                            <c:if test="${status.index%2 == 0}">
				                                <div class="ch_middle fl">
				                            </c:if>
				                            <!-- 左数据 -->
				                            <c:if test="${status.index%2 == 1}">
				                                <div class="ch_middle fr">
				                            </c:if>
				                                    <p class="data_block">${item.itemNameCN}：</p>
				                                    <p>${item.optionNameCN}</p>
				                                   </div>
				                        <c:if test="${status.index%2 == 1 || status.index == (fn:length(optionList5)-1)}">
				                            </div>
				                        </c:if>
				                    </c:forEach>
				                </div>
				            </div>
				            </div>
				        </div>
				    </div>
		<!--售价-->
	    <div class="tabSm none">
	    	<div class="tableArea">
	        	<div class="tableScroll tableScrollSm" style="height: 452px; width: inherit;padding: 0px;">
	        		<div class="contentBox cnBx">
	                <p class="contentTit"><spring:message code="order_sales_price"/></p>
	                <div class="formBox scrollBox">
	                 <!-- 面料费用 -->
	                 <p class="mtCost"><spring:message code="order_fabric_cost"/></p>
	                 <div class="mtName">
	                     <!-- 面料名称： -->
	                     <p class="mtNm fl"><span><spring:message code="order_fabric_name_show"/></span>${order.fabricName}</p>
	                     <!-- 面料费用： -->
	                     <p class="mtCost fr"><span><spring:message code="order_fabric_cost_show"/></span><fmt:formatNumber value="${order.materialTotalPrice}" pattern="#,#00.00#"/>￥</p>
	                 </div>
	                 <!-- 单一项目费用 -->
	                 <p class="mtCost"><spring:message code="order_single_project_cost"/></p>
	                 <div class="tableBox">
	                     <div class="tableBoxScroll tablePic slm" style="height:auto;">
	                         <table cellpadding="0">
	                             <thead>
	                             <tr>
	                                 <!-- No. -->
	                                 <th><spring:message code="order_No"/></th>
	                                 <!-- 中文全称 -->
	                                 <th><spring:message code="order_name_cn"/></th>
	                                 <!-- 项目费用 -->
	                                 <th><spring:message code="order_item_cost"/></th>
	                                  <th></th>
	                             </tr>
	                             </thead>
	                             <tbody>
	                             <c:forEach items="${optionListAll}" var="item" varStatus="status">
	                                 <tr>
	                                     <!-- NO. -->
	                                     <td>
	                                         <p>${status.index+1}</p>
	                                     </td>
	                                     <!-- 中文名称 -->
	                                     <td>
	                                         <p>${item.itemNameCN}</p>
	                                        </td>
	                                     <!-- 项目费用 -->
	                                        <td>
	                                         <p><fmt:formatNumber value="${item.itemCost}" pattern="#,#00.00#"/> </p>
	                                     </td>
	                                     </tr>
	                                </c:forEach>
	                             </tbody>
	                         </table>
	                     </div>
	                 </div>
	                 </div>
	             </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>